<template>
  <div class="post-floor">
    <ul class="post-list">
      <li class="post-item flex" v-for="post in postList" :key="post.id">
        <a :href="`/article?id=${post.id}`" class="cover-container">
          <img :src="post.cover" class="cover fit-cover" />
        </a>
        <div class="post-info">
          <div class="title flex flex-ac">
            <img class="game-logo" src="/logo.png" alt="" />
            <a
              :href="`/article?id=${post.id}`"
              class="title-link text-ellipsis"
              >{{ post.title }}</a
            >
          </div>
          <div class="info">
            <div class="desc text-ellipsis">
              {{ post.desc }}
            </div>
          </div>
          <div class="time">
            <span class="date">{{ post.date }}</span>
          </div>
        </div>
      </li>
    </ul>
    <Pagination
      :page-num="pageInfo.pageNum"
      :page-size="pageInfo.pageSize"
      :total="postList.length"
      @pageChange="handlePageChange"
    ></Pagination>
  </div>
</template>

<script setup lang="ts">
import { getPostList } from "@/api/post";
import { onMounted, ref, reactive } from "vue";
import Pagination from "@/components/Pagination.vue";

const postList = ref<PostData[]>([]);

const pageInfo = reactive({
  pageNum: 1,
  pageSize: 5,
});

const handlePageChange = async (pageNum: number, pageSize: number) => {
  await handleGetPostList(pageNum, pageSize);
};

const handleGetPostList = async (pageNum: number, pageSize: number) => {
  const result = await getPostList(pageNum, pageSize);
  // if (result.data.code === 200) {
  //   console.log(result.data);
  //   postList.value = result.data.data;
  // }
  postList.value = result;
};

onMounted(async () => {
  await handleGetPostList(pageInfo.pageNum, pageInfo.pageSize);
});
</script>

<style scoped lang="scss">
.post-floor {
  width: 100%;
  height: fit-content;
  overflow: hidden;

  .post-item {
    width: 100%;
    background: var(--xz-card-bg);
    padding: 16px;
    margin-bottom: 15px;
    overflow: hidden;
    border-radius: 10px;

    &:hover {
      .title-link {
        color: var(--xz-theme);
      }
    }

    .cover-container {
      width: 154px;
      margin-right: 20px;
      height: 100%;

      img {
        width: 154px;
        height: 100%;
        max-width: none;
        max-height: none;
      }
    }

    .post-info {
      overflow: hidden;
      position: relative;

      .title {
        .game-logo {
          width: 25px;
          height: 25px;
          margin-right: 8px;
        }
      }

      .info {
        margin-top: 0.8rem;
      }

      .time {
        margin-top: 0.5rem;
      }
    }
  }
}
</style>
